<template>
	<sl-page title="账户结算">
		<view class="account">
			<view class="account-tab">
				<view class="tab-head">
					<view class="tab-head-analyse">
						<view class="flex flex-column flex-y-center" v-for="(item, index) in accountAnalyse"
							:key="index">
							<Money :priceValue="item.count" :activeClass="['money-36']"></Money>
							<view class="py-1">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view class="tab-query">
					<view class="flex flex-y-center" @click="dateMonthSelect.show = true">
						<view class="">年月:</view>
						<view class="">
							{{dateMonth}}
						</view>
						<uni-icons type="bottom" size="18"></uni-icons>
					</view>
					<view class="flex flex-y-center" @click="accountTypeSelect.show = true">
						<view class="">类型:</view>
						<view class="">
							{{accountType}}
						</view>
						<uni-icons type="bottom" size="18"></uni-icons>
					</view>
					<view class="">
						<Rules></Rules>
					</view>
				</view>
			</view>
			<z-paging ref="paging" :paging-style="{'margin-top':top + 'px'}" v-model="accountList" @query="loadPage">
				<view class="account-page">
					<List :listDatas="accountList">
						<template v-slot="{ item }">
							<view class="flex">
								<view class="flex flex-basis-10">
									<view class="iconfont icon-xiadanyedizhi"></view>
								</view>
								<view class="flex flex-column flex-basis-60">
									<block v-if="item.tradeType == 99">
										<view class="f-w">
											{{tradeTypes(item.tradeType)}} {{item.tradeDesc}}
											<!-- {{TradeTypes.getNameByValue(item.tradeType)}} -->
										</view>
										<view class="f-24 py-1">
											日期 {{item.createDate}}
										</view>
										<view class="f-24">
											备注 {{item.remarks}}
										</view>
									</block>
									<block v-else>
										<view class="f-w">
											{{tradeTypes(item.tradeType)}}
											<!-- {{TradeTypes.getNameByValue(item.tradeType)}} -->
										</view>
										<view class="f-24 py-1">
											日期 {{item.createDate}}
										</view>
										<view class="f-24">
											订单号 {{item.cashSn}}
										</view>
									</block>
								</view>
								<view class="flex flex-column flex-y-end flex-basis-30">
									<block v-if="item.tradeType == 99">
										<view class="flex f-w f-28">
											-<Money :priceValue="item.amount" :activeClass="['money-normal']"></Money>
										</view>
									</block>
									<block v-else>
										<view class="flex f-w f-28">
											+<Money :priceValue="item.amount" :activeClass="['money-normal']"></Money>
										</view>
									</block>

									<view class="flex flex-y-center py-1 f-24">
										{{accountType}} <Money :priceValue="item.total" :activeClass="['money-normal']"></Money>
									</view>
								</view>
							</view>
						</template>
					</List>
				</view>
			</z-paging>
			<!-- 底部按钮 -->
			<sl-flooter>
				<view class="btn-primary" @click="withdrawal()">提现</view>
			</sl-flooter>
			<!-- 账户年月 -->
			<DateMonth :show.sync="dateMonthSelect.show" @dateMonth:picker="onDateMonthPicker"></DateMonth>
			<!-- 账户类型 -->
			<AccountType :show.sync="accountTypeSelect.show" @accountType:picker="onAccountTypePicker"></AccountType>
		</view>
	</sl-page>
</template>

<script>
	import OrderApi from '@/api/order/order.js';
	import BalanceApi from '@/api/finance/balance.js';
	import TradeTypes from '@/utils/enum/tradeTypes.js';
	import Constants from '@/constants';
	import List from '@/pages/components/list/list.vue';
	import Money from '@/pages/components/money/money.vue';
	import DateMonth from '@/pages/components/picker/dateMonth.vue';
	import AccountType from '@/pages/components/picker/accountType.vue';
	import Rules from '@/pages/components/account/rules/rules.vue';
	//
	export default {
		//
		name: 'accountIndex',
		//
		mixins: [Constants],
		//
		components: {
			List,
			Money,
			DateMonth,
			AccountType,
			Rules,
		},
		//
		data() {
			return {
				//
				options: {},
				//
				query: {},
				//正在加载
				isLoading: true,
				//
				accountList: [],
				top: '',
				//账户分析
				accountAnalyse: [{
					id: '1',
					name: '待结算',
					count: '0',
				}, {
					id: '2',
					name: '可提现',
					count: '0',
				}, {
					id: '3',
					name: '冻结中',
					count: '0',
				}],
				//账户年月
				dateMonth: '2023年8月',
				//账户类型
				accountType: '待结算',
				//账户年月
				dateMonthSelect: {
					show: false
				},
				//账户类型
				accountTypeSelect: {
					show: false
				},
				//提现金额
				cashs: '1000'
			};
		},
		computed: {
			tradeTypes: () => {
				return (tradeType) => (tradeType > 0 ? TradeTypes.getNameByValue(tradeType) : '--');
			},
		},
		//
		onLoad() {

		},
		//
		onShow() {
			//
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.account-tab').boundingClientRect(data => {
					this.top = this.CustomBar + data.height;
				}).exec();
			});
			//初始化我的账户统计
			this.initAccountCount();
			//初始化查询参数
			this.initQuery();

		},
		//
		methods: {
			//初始化结算账户
			initAccountCount: async function() {
				const res = await BalanceApi.get();
				this.accountAnalyse[0].count = 900;
				this.accountAnalyse[1].count = 800;
				this.accountAnalyse[2].count = 700;
				console.log('res:------------456 ', res);
			},
			//初始化查询参数
			initQuery() {
				this.query.tradeDate = '2023-08';
				this.query.amountType = '1';
			},
			//加载结算账户清单
			loadPage: async function() {
				try {
					const res = await BalanceApi.query(this.query, this.param);
					console.log('res:------------123 ', res);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【accountIndex:loadPage】:', error);
					this.$refs.paging.complete(false);
				}
			},
			//选择年月
			onDateMonthPicker: function(item) {
				console.log('onDateMonthPicker: ', item);
				this.dateMonth = item.name;
				this.query.tradeDate = item.name;
				this.$refs.paging.reload()
			},
			//选择类型
			onAccountTypePicker: function(item) {
				console.log('onAccountTypePicker: ', item);
				this.accountType = item.name;
				switch (item.name) {
					case '待结算':
						this.query.amountType = '1';
						break;
					case '可提现':
						this.query.amountType = '2';
						break;
					default:
						this.query.amountType = '';
				}
				this.$refs.paging.reload()
			},
			//提现
			withdrawal() {
				//todo
				this.$app.navTo(this.pages.withdrawalAccountPage, {
					cashs: this.cashs
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.account {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;

		.account-tab {

			.tab-head {
				margin-top: 16rpx;
				margin-left: 32rpx;
				margin-right: 32rpx;
				border-radius: 8px;
				background: #FFF;
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);

				.tab-head-analyse {
					display: flex;
					justify-content: space-around;
					padding-top: 62rpx;
					font-size: 24rpx;
				}
			}

			.tab-query {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 32rpx;
				margin-right: 32rpx;
				margin-top: 38rpx;
				padding: 0rpx 20rpx;
			}
		}

		.account-page {
			margin-top: 24rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;

			.item {}
		}
	}
</style>